<template>
  <div class="type_9-outer flex">
    <img v-if="config_data.head_img" :src="config_data.head_img" alt="" draggable="false">
    <ul class="max">
      <li v-for="row in list">{{row.title}}</li>
    </ul>
    <span style="color: var(--el-color-primary)">更多</span>
  </div>
</template>

<script>
import Conveyer from "@/assets/Conveyer.es6.js";

export default {
  name: "type_9",
  props: ['title','list','config','model_id','table_name','href'],
  data(){
    return { }
  },
  methods: {},
  computed: {
    config_data(){
      try {
        return this.config ? JSON.parse(this.config) : {};
      } catch (e) {
        return {};
      }
    },
  },
  mounted(){
    let app = this;
    //渲染完成执行
    let speed = this.config_data.speed || 1.5;

    let outer = this.$el.querySelector('ul');
    let lis = outer.querySelectorAll('li');
    if (lis.length >= 1){
      app.conveyer = new Conveyer(outer);
      app.conveyer.next();
      setInterval(function () {
        app.conveyer.next()
      }, speed*1000);
    }
  }
}
</script>

<style scoped>
.type_9-outer{padding: 8px;}
.type_9-outer>img{height: 20px;}
.type_9-outer>ul{height: 1.5em;position: relative;overflow: hidden;margin: 0 8px;}
.type_9-outer>ul>li{background: var(--bg);width: 100%;height: 100%;position: absolute;top: 0;left: 0;transition: top 0.3s;}
.type_9-outer>ul>li.conveyer-head{top: -100%;}
.type_9-outer>ul>li.conveyer-tail{top: 100%;}

</style>